<template>
  <div class="content">
    <!-- <div>
      <van-nav-bar title="全部客户" left-arrow @click-left="onClickLeft" />
    </div> -->
    <Loading :loading="loading">
      <NavBar></NavBar>
      <div class="search flex-row flex-align-center">
        <van-search
          v-model="value"
          placeholder="搜索客户"
          class="input"
          @input="onSearch"
        ></van-search>
        <img
          class="xinzeng"
          src="./img/xinzeng.jpg"
          alt=""
          @click="$router.push('/addCustomer')"
        />
      </div>
      <div class="birthday" @click="$router.push({ path: `/birthdayRemind` })">
        <img src="./img/birthday.png" alt="" class="birthdayImg" />
        <span class="color">{{ count }}</span>
        位近期生日
      </div>
      <div class="center" v-for="letterItem in list" :key="letterItem.index">
        <div class="letter" v-show="letterItem.letter !== ''">
          {{ letterItem.letter }}
        </div>
        <div
          v-for="item in letterItem.data"
          :key="item.id"
          @click="hundleJump(item)"
        >
          <div class="name flex-row flex-align-center">
            <div class="pic" v-if="(item.sex == 'F')">
              <img src="./img/touxiang.png" alt="" />
            </div>
            <div class="pic" v-else>
              <img src="./img/touxiangnan.png" alt="" />
            </div>
            <div class="text">{{ item.chnName }}</div>
            <div class="baodan">在保保单 {{ item.policyCount }}</div>
            <div class="baofei">保费 {{ item.sumPremium }}</div>
          </div>
          <!-- <div class="line"></div> -->
        </div>
      </div>
      <van-empty v-if="list.length === 0" description="暂无数据" />
    </Loading>
  </div>
</template>
<script>
import API from '@/services/h5/my'
import { chineseLetter } from '@/utils/public/ch-sort.js'
import NavBar from '@/components/h5header'
import Loading from '@/components/data-loading'
import { debounce } from '@/utils/public/debounce.js'
export default {
  components: { NavBar, Loading },
  data() {
    return {
      value: '',
      list: [],
      birthdayRemindFlag: '',
      count: 0,
      birthdayList: [],
      listAll: [],
      loading: false
    }
  },
  mounted() {
    this.getCustomerList()
  },
  methods: {
    onClickLeft() {
      window.history.go(-1)
    },
    getCustomerList() {
      this.loading = true
      API.customerList()
        .then(res => {
          console.log(res)
          if (res.data && res.data.code === 1000) {
            if (res.data.data.length == 0) {
              this.loading = false
            } else {
              this.list = chineseLetter(res.data.data, 'chnName')
              // this.list = res.data.data
              this.listAll = res.data.data
              this.count = this.listAll.filter(item => {
                return item.birthdayRemindFlag === 'Y'
              }).length
              this.birthdayList = this.list.filter(item => {
                return item.birthdayRemindFlag === 'Y'
              })
            }
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    hundleJump(item) {
      this.$router.push({ path: `/addCustomer/${item.id}` })
    },
    onSearch: debounce(function () {
      const arr = this.listAll.filter(item => {
        return item.chnName && item.chnName.indexOf(this.value) != -1
      })
      if (arr.length > 0) {
        this.list = chineseLetter(arr, 'chnName')
      } else {
        this.list = arr
      }
    })
  }
}
</script>
<style scoped lang="less">
.content {
  background: #fafafa;
  height: calc(100vh);
}
.search {
  background-color: #fff;
}
.input {
  width: 330px;
}
/deep/.van-search__content {
  border-radius: 40px;
  background-color: #f3f3f3;
}
.birthday {
  width: 345px;
  height: 60px;
  line-height: 60px;
  margin: 5px 15px;
  background-color: #fff;
  border-radius: 60px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.color {
  color: @c-color-primary;
  font-size: 20px;
}
.center {
  width: 375px;
}
.letter {
  height: 15px;
  line-height: 15px;
  font-size: 13px;
  color: #999;
  padding: 0 15px;
  background-color: #f3f3f3;
}
.name {
  padding: 15px;
  background-color: #fff;
  position: relative;
}
.pic {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}
.pic img {
  width: 100%;
}
.text {
  font-size: 15px;
  color: #333;
  position: absolute;
  left: 60px;
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.baodan {
  font-size: 13px;
  color: #999;
  position: absolute;
  left: 179px;
}
.baofei {
  font-size: 13px;
  color: #999;
  position: absolute;
  left: 265px;
}
// .line {
//   width: 345px;
//   height: 0.5px;
//   background-color: #f0f0f0;
//   margin: 0 auto;
// }
.xinzeng {
  width: 40px;
  height: 40px;
}
.birthdayImg {
  width: 25px;
  height: 25px;
  margin-right: 10px;
}
</style>
